<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>消息中心</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/xadmin.css">
</head>

<body>
    <div class="layui-fluid" id="LAY-app-message">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">消息中心
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-card-body layui-table-body layui-table-main">
                <button class="layui-btn layui-btn-primary layui-btn-sm del">删除</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm ready">标记已读</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm readyAll">全部已读</button>
                <!-- 表格部分开始 -->
                <table id="message_table" lay-filter="test" lay-data="{id: 'messageId'}"></table>
                <script type="text/html" id="barDemo"></script>
                <!-- 表格结束 -->
            </div>
        </div>
    </div>
</body>

</html>
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/base.js"></script>

<script>
    layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;
        var idArry = [];//选中的id数组

        var index = layer.load(1); //添加laoding,0-2两种方式

        //第一个实例
        var ins1 = table.render({
            elem: '#message_table', //指定原始表格元素选择器（推荐id选择器）
            width: "100%",
            loading: true,
            method: 'get',
            url: getAllOAMessageList, //数据接口
            page: true, //开启分页
            cols: [
                [ //表头
                    {type:'checkbox'},
                    {
                        field: 'content',
                        title: '标题内容',
                        width: 600,
                        templet: function (d) {
                            if (d.isRead == "1") {
                                // 已读
                                return "<span>" + d.content + "</span>"
                            } else {
                                return "<span style='display:inline-block;font-weight:1000;color:000'>" + d.content + "</span>"
                            }
                        }
                    },
                    {
                        field: 'addTime',
                        title: '时间',
                        width: 300,
                        templet:function(d){
                            if (d.isRead == "1") {
                                // 已读
                                if(!d.addTime){
                                    return ""
                                } else {
                                    return "<span>" + d.addTime + "</span>"
                                }
                            } else {
                                if(!d.addTime){
                                    return ""
                                } else {
                                    return "<span style='display:inline-block;font-weight:1000;color:#000'>" + d.addTime + "</span>"
                                }
                            }
                        }
                    },
                ]
            ],
            id: 'messageId',
            done: function (res) {
                layer.close(index)
                console.log(res)
                if (res.msg == "2") {
                    parent.window.location.href = getRequestPrefix() + "/footBallAdmin/login.html"
                }
            }
        });

        // 监听复选框选择
        table.on('checkbox(test)', function(obj){
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // idArry = []
            var checkStatus = table.checkStatus('messageId');
            console.log(checkStatus.data,'输出选中的行数据')//选中行数据
            idArry = []
            for(var i = 0; i < checkStatus.data.length; i++){
                idArry.push(checkStatus.data[i].id)
            }
        });
        // 监听行点击事件
        table.on('rowDouble(test)', function(obj){
            // console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
            var arr = [];
            arr.push(obj.data.id);
            $.ajax({
                type: "get",
                url: changeIsRead,
                data: {
                    messageIds: JSON.stringify(arr),
                    type:'one'
                },
                success: function (res) {
                    if (res.msg == 0) {
                        //删除成功
                        // layer.alert("操作成功")
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        table.reload('messageId', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                    } else {
                        layer.msg(res.msg)
                    }
                }
            })
            $.ajax({
                url:getMessageDetails,
                method:'post',
                data:{
                    id:obj.data.id
                },
                success:function(res){
                    if(res.msg == 0){
                        layer.open({
                            content: "messageDetail.html",
                            type: 2, //打开的窗口的类型
                            area: ["100%", "100%"],
                            title: "消息详情",
                            shadeClose: true,
                            success:function(layero, index){
                                var body = layer.getChildFrame('body', index);
                                var iframeWin = window[layero.find('iframe')[0]['name']];
                                body.find('.title').text(res.message.title)
                                body.find('.time').text(res.message.time)
                                body.find('.content').text(res.message.content)
                            }
                        })
                    }
                },
                error:function(){

                }
            })
        });

        // 删除u
        $(".del").on('click',function(){
            if(idArry.length == 0){
                layer.alert('您未选中任何行', {
                    title: '提示'
                })
            } else {
                layer.confirm('确定删除选中消息？', function (index) { //点击确定后，才执行下面语句
                    $.ajax({
                        type: "get",
                        url: delMessageByMessageId,
                        data: {
                            messageIds: JSON.stringify(idArry)
                        },
                        success: function (res) {
                            if (res.msg == 0) {
                                //删除成功
                                layer.alert("删除成功")
                                layer.close(index);
                                table.reload('messageId', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                }, 'data');
                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    })

                    //向服务端发送删除指令
                });
            }
            return false;
        });

        // 标记为已读
        $('.ready').on('click',function(){
            if(idArry.length == 0){
                layer.alert('您未选中任何行',{
                    title:'提示'
                })
            } else {
                $.ajax({
                    type: "get",
                    url: changeIsRead,
                    data: {
                        messageIds: JSON.stringify(idArry),
                        type:'one'
                    },
                    success: function (res) {
                        if (res.msg == 0) {
                            //删除成功
                            layer.alert("操作成功")
                            layer.close(index);
                            table.reload('messageId', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            }, 'data');
                        } else {
                            layer.msg(res.msg)
                        }
                    }
                })
            }
        });

        $('.readyAll').on('click',function(){
            $.ajax({
                url:changeIsRead,
                method:'get',
                data:{
                    type:'all'
                },
                success: function (res) {
                    if (res.msg == 0) {
                        //删除成功
                        layer.alert("操作成功")
                        table.reload('messageId', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');
                    } else {
                        layer.msg(res.msg)
                    }
                }
            })
        })
    });

</script>